<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">工单查询</block>
		</cu-custom>
	  <view class="container">
	  		<!-- 条件查询输入框 -->
	  		<view class="search-bar">
	  		  <!-- 输入框 -->
	  		  <view class="input-wrapper">
	  			  <input v-model="searchVal" placeholder="请输入查询数据"
	  			   @input="handleInput" 
	  			   :focus="focusStateProduct"
	  			   style="background-color: white;" 
	  			   autofocus
	  			   />
	  			<!-- 清除按钮 -->
	  <!-- 				<button 
	  				  v-if="searchVal" 
	  				  class="clear-button" 
	  				  @click="clearSearchKeyword"
	  				>
	  				  X
	  				</button> -->
	  		  </view>
	  		  <button @click="search">查询</button>
			    <button 
			      @click="scan"
			      style="position: fixed; right: 20rpx; bottom: 20rpx; z-index: 999; opacity: 0.8;"
			      size="mini"
			      type="primary"
			    >
				<uni-icons type="scan" size="24" color="#ffffff"/>
				</button>
	  		</view>
	  		<!-- 表格展示查询结果 -->
	  			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
	  				<uni-tr>
	  					<uni-th width="20" align="center">序号</uni-th>
	  					<uni-th width="150" align="center">工单号</uni-th>
	  					<uni-th width="150" align="center">客户单号</uni-th>
	  					<uni-th align="center">客户名称</uni-th>
	  					<uni-th width="150" align="center">下单日期	</uni-th>
	  					<uni-th width="150" align="center">需求日期</uni-th>
	  					<uni-th width="150" align="center">工单数量</uni-th>
	  					
	  					<uni-th width="150" align="center">状态</uni-th>
						<uni-th width="150" align="center">产品编码</uni-th>

						<uni-th width="150" align="center">图号</uni-th>
						<uni-th width="150" align="center">描述</uni-th>
						<uni-th width="150" align="center">版本</uni-th>
					    <uni-th width="150" align="center">产品名称</uni-th>
						<uni-th width="550" align="center">工序进度</uni-th>
	  					<!-- <uni-th width="204" align="center">设置</uni-th> -->
	  				</uni-tr>
	  				<uni-tr v-for="(item, index) in tableData" :key="index">
	  					<uni-td>{{ index + 1 }}</uni-td>
	  					<uni-td>{{ item.workOrderNumber }}</uni-td>
	  					<uni-td>
	  						<view class="name">{{ item.customerPoNumbers }}</view>
	  					</uni-td>
	  					<uni-td align="center">{{ item.customerShortName }}</uni-td>
	  					<uni-td>{{ item.orderDate }}</uni-td>
	  					<uni-td>{{ item.deliveryDate }}</uni-td>
	  					<uni-td>{{ item.qty }}</uni-td>
	  					
	  					<uni-td>{{ item.status_dictText }}</uni-td>
						<uni-td>{{ item.code }}</uni-td>
						
						<uni-td>{{ item.drawingNo }}</uni-td>
						<uni-td>{{ item.description }}</uni-td>
						<uni-td>{{ item.productVer }}</uni-td>
						<uni-td>{{ item.name }}</uni-td>
						<uni-td>
			<view class="cu-form-group" style="display: inline;line-height: 3;">
				<span  v-for="(subItem, k) in item.workOrderProcesses " :key="k">
<!-- 				  <span v-if="item.qty && item.qtyWorkOrder && item.qty >= item.qtyWorkOrder " @tap="dispList(item)" class="spanStyle1">{{ item.processId_dictText}}</span>
				  <span v-else-if="!item.qty"  @tap="dispList(item)" class="spanStyle2">{{ item.processId_dictText}}</span>
				  <span v-else  @tap="dispList(item)"  class="spanStyle">{{ item.processId_dictText}}</span> -->
				  <span v-if="(subItem.qty == null?0:subItem.qty) >= (subItem.qtyWorkOrder == null?0:subItem.qtyWorkOrder)" @tap="dispList(subItem)" class="spanStyle1">{{ subItem.processName}}</span>
				  <span v-else-if="subItem.processAttribute == 2 && subItem.qtyOutIssue && subItem.qtyWorkOrder && subItem.qtyOutIssue < subItem.qtyWorkOrder"  @tap="dispList(subItem)" class="gProgress">{{ subItem.processName}}</span>
				  <span v-else-if="subItem.processAttribute == 2 && subItem.qtyOutIssue && subItem.qtyWorkOrder && subItem.qtyOutIssue >=subItem.qtyWorkOrder"  @tap="dispList(subItem)" class="spanStyle">{{ subItem.processName}}</span>
				  <span v-else-if=" !subItem.qty" class="spanStyle2"  @tap="dispList(subItem)" >{{ subItem.processName}}</span>
				  <span v-else  @tap="dispList(subItem)"  class="spanStyle">{{ subItem.processName}}</span>
				</span>
				
			</view>							
						
						
						
						</uni-td>
	  <!-- 					<uni-td>
	  						<view class="uni-group">
	  							<button class="uni-button" size="mini" type="primary">修改</button>
	  							<button class="uni-button" size="mini" type="warn">删除</button>
	  						</view>
	  					</uni-td> -->
	  				</uni-tr>
	  			</uni-table>
	  			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
	  	  </view>
	  	  <view class="example-body">
	  		<drawer :show="subOrderDrawerShow" @cancel="subOrderCancel" @ensure="subOrderEnsure" >
	  			<view style="margin-top: 140rpx;">
	  				<uni-table ref="itemTable" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionDrawChange">
	  					<uni-tr>
	  						<uni-th width="50" align="center">序号</uni-th>		
	  <!-- 						<uni-th width="150" align="center">工单号</uni-th>
	  						<uni-th width="150" align="center">客户</uni-th> -->
	  						<uni-th width="120" align="center">产品编码</uni-th>
	  						<uni-th width="150" align="center">客户料号</uni-th>
	  						<uni-th width="120" align="center">图号</uni-th>
	  						<uni-th width="120" align="center">产品名称</uni-th>
	  						<uni-th width="150" align="center">版本</uni-th>
	  						<uni-th width="120" align="center">数量</uni-th>
	  						<uni-th width="120" align="center">下单日期</uni-th>	
	  						<uni-th width="120" align="center">需求日期</uni-th>									
	  					</uni-tr>
	  					<uni-tr v-for="(item1, index) in itemChilds" :key="index">
	  						<uni-td>{{ (index + 1) }}</uni-td>
	  <!-- 						<uni-td>{{ item1.workOrderNumber }}</uni-td>
	  						<uni-td>{{ item1.customerShortName }}</uni-td> -->
	  						<uni-td>{{ item1.productCode }}			</uni-td>
	  						<uni-td>		{{item1.custPoMaterial}}		</uni-td>
	  						  <uni-td>		{{item1.drawingNo}}		</uni-td>
	  						<uni-td>		{{item1.productName}}		</uni-td>
	  						<uni-td>		{{item1.productVer}}		</uni-td>
	  						<uni-td>		{{item1.qty}}		</uni-td>
	  						<uni-td>		{{item1.orderDate ? item1.orderDate : '' }}		</uni-td>
	  						<uni-td>		{{item1.deliveryDate ? item1.deliveryDate : '' }}		</uni-td>
	  					</uni-tr>
	  				</uni-table>
	  			  </view>
	  			</drawer>	
	  		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		subOrderDrawerShow:false,
		focusStateProduct:false,
      searchKeyword: '',
	  searchVal: '',
		tableData: [],
		itemChilds : [],
		// 每页数据量
		pageSize: 10,
		// 当前页
		pageCurrent: 1,
		// 数据总量
		total: 0,
		loading: false,
		queryWoParams:{},
		optionsData : '',
		baseFormData: {
			workOrderNumber:'',
			workOrderQty : '',
			},
			
	  url : {
		   list: '/wom/womWorkOrder/list',
		   queryById : '/wom/womWorkOrder/queryItemById',
	  }
    };
  },
 onLoad(options) {
	 // this.optionsData = JSON.stringify(options);
	 // if (options.data) {
	 //   this.queryWoParams = JSON.parse(decodeURIComponent(options.data))
	 //   console.log('解析后的参数:', this.queryWoParams)
	 // } else {
		//  this.queryWoParams = {}
	 // }
  		this.selectedIndexs = []
  		this.getData(1)
  },
  methods: {
	  dispList(item){},
	  handleDetail(id){
		  let that = this
		  let params = {
		  	'itemId' : id,
		  }
		  this.loading = true
		  this.$http.get(this.url.queryById, {
		  	params: params
		  }).then(res => {

		  	this.loading = false
		  	that.itemChilds = res.data.result.records || res.data.result;
		  	console.log(that.itemChilds)
			console.log(res.data.result)
			that.$nextTick(()=>{
				// this.subOrderDrawerShow = true
			})
			
		  })
	  },
	  scan(){
	  	let that = this
	  	// this.completeFlag = false
	  	this.focusState = false
	  	 console.log("进来了")
	  	// #ifndef H5
	  	uni.scanCode({
	  	    success: function (res) {
	  						  const innerAudioContext = uni.createInnerAudioContext();
	  									innerAudioContext.autoplay = true;
	  									innerAudioContext.src = 'https://www.suzi-info.com/13193.wav';  //音频地址
	  									innerAudioContext.onPlay(() => {
	  										console.log('开始播放');
	  									});
	  									innerAudioContext.onError((res) => {
	  									  console.log(res.errMsg);
	  									  console.log(res.errCode);
	  									});
	  			that.baseFormData.workOrderNumber = res.result.split('/')[0]
	  			that.baseFormData.workOrderQty = ''						
	  			that.getWorkOrderData();
	  	    }
	  	});
	  	// #endif
	  		// #ifdef H5
	  		this.$tip.alert("暂不支持")
	  		// #endif
	  },
	  getWorkOrderData(){
	  	let that = this
	  	if(!this.baseFormData.workOrderNumber){
	  		this.$tip.alert('工单号码不存在！');
	  		return false
	  	}
	  	let param={queryName:this.baseFormData.workOrderNumber}
	  	this.$http.get("/wom/womWorkOrder/list",{params:param}).then(res=>{
	  		let data = res.data.result.records
	  		console.log("res::workOrderNumber list>",data)
	  		if (data && data.length > 0){	
	  			console.log(data[0])
				this.initData(data[0].workOrderGroupId)
	  		} else {
	  			this.$tip.toast('未找到工单数据！')
	  		}
	  	})
	  },	
	  initData(id) {
		  debugger
		  let that = this
		  this.pageCurrent = 1
		  this.pageSize = 1000
		  let params = {
		  	'pageNo': 1,
		  	'pageSize': 1000,
		  	'column': 'createTime,updateTime',					
		  	'order': 'desc',
		  }
		  let superArr = []
		  superArr.push({"rule":"eq","type":"string","val":id,"field":"workOrderGroupId"})
		  params.superQueryMatchType = 'and'
		  params.superQueryParams = encodeURIComponent(JSON.stringify(superArr))
	  	this.$http.get("/wom/womWorkOrder/list",{params:params}).then(res=>{
	  		let data = res.data.result.records
	  		console.log("res::workOrderNumber list>",data)
	  		if (data && data.length > 0){		
               this.tableData = data
			   if (res.data.result.total) {
			   	this.total = res.data.result.total						
			   } else {
			   	this.total = 0
			   }
	  		} else {
	  			this.$tip.toast('未找到工单数据！')
	  		}
	  	})		  
	  },
		subOrderCancel() {
			console.log('您点击了取消按钮')
			this.subOrderDrawerShow = false;
		},
		//确定
		subOrderEnsure(){
			console.log('您点击了确定按钮')
			this.subOrderDrawerShow = false;
		},		  
	  setFocusProduct() {
		let that = this
		this.$nextTick(()=>{
			setTimeout(() => {
						that.focusStateProduct = true
				},1000)
		})
	  
	  },
	  handleInput() {
		  
	  },
	  selectedItems() {
	  	  			return this.selectedIndexs.map(i => this.tableData[i])
	  	  		},
		// 多选
		selectionDrawChange(e) {
			
		},
		selectionChange(e) {
			console.log(e.detail.index)
			this.selectedIndexs = e.detail.index
			if (this.selectedIndexs.length == 1) {
				let rows = this.selectedItems()
				this.handleDetail(rows[0].id)
			}
		},
		//批量删除
		delTable() {
			console.log(this.selectedItems())
		},
		// 分页触发
		change(e) {
			this.$refs.table.clearSelection()
			this.selectedIndexs.length = 0
			this.getData(e.current)
		},
		clearSearchKeyword() {
			debugger
		  this.searchVal = ''
		},
		// 搜索
		search() {
			this.getData(1, this.searchVal)
		},
		searchAll() {
			
		},
        getData(pageCurrent, value = '') {
				this.pageCurrent = pageCurrent
				this.pageSize = 10
				let that = this
				let params = {
					'queryName' : value,
					'pageNo': this.pageCurrent,
					'pageSize': this.pageSize,
					'column': 'createTime,updateTime',					
					'order': 'desc',
				}
				if (this.queryWoParams && this.queryWoParams.orderNumber && this.queryWoParams.productCode) {
				  params = {}
				  let superArr = []
				  superArr.push({ rule: 'eq', type: 'string', dictCode: '', val:this.queryWoParams.orderNumber , field: 'salseOrderNumber' })
				  superArr.push({ rule: 'eq', type: 'string', dictCode: '', val:this.productCode , field: 'code' })				 
				  params.superQueryParams = JSON.stringify(superArr)
				  params.superQueryMatchType = 'and'
				}
				this.loading = true
				this.$http.get(this.url.list, {
					params: params
				}).then(res => {
					this.loading = false
					this.tableData = res.data.result.records || res.data.result;
					console.log(this.tableData)
					this.setFocusProduct()
					if (res.data.result.total) {
						this.total = res.data.result.total						
					} else {
						this.total = 0
					}
				})
			},		
		// 获取数据
		getData1(pageCurrent, value = '') {
			this.loading = true
			this.pageCurrent = pageCurrent
			this.pageSize = 10
			this.request({
				pageSize: this.pageSize,
				pageCurrent: pageCurrent,
				value: value,
				success: res => {
					// console.log('data', res);
					this.tableData = res.data
					this.total = res.total
					this.loading = false
				}
			})
		},
	  // 伪request请求
		request(options) {
			const { pageSize, pageCurrent, success, value } = options
			let total = tableData.length
			let data = tableData.filter((item, index) => {
				const idx = index - (pageCurrent - 1) * pageSize
				return idx < pageSize && idx >= 0
			})
			if (value) {
				data = []
				tableData.forEach(item => {
					if (item.name.indexOf(value) !== -1) {
						data.push(item)
					}
				})
				total = data.length
			}
  
			setTimeout(() => {
				typeof success === 'function' &&
					success({
						data: data,
						total: total
					})
			}, 500)
		},
	  
  }
};
</script>

<style scoped>
.input-wrapper {
  position: relative;
  flex: 1;
}
.input-wrapper input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
   box-sizing: border-box; /* 确保内边距和边框不会增加元素的宽度 */
}
.clear-button {
  position: absolute;
  top: 50%;
  right: 20px; /* 调整按钮的位置，避免被输入框的边框遮挡 */
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  font-size: 16px;
  cursor: pointer;
  z-index: 1; /* 确保按钮在最上层，不会被其他元素遮挡 */
}	
.container {
  padding: 6px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.search-bar input {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}
.search-bar button {
  height: 40px;
  padding: 0 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  align-items: center;
  line-height: 40px;
}
	.spanStyle {
		    background: red;
		    padding: 3px 5px;
		    word-break: break-word;
		    margin: 3px;
		    border-radius: 5px;
		    color: white;
		    font-size: 12px;
/* 		    cursor: pointer; */
	}
	.spanStyle1 {
			    background: #11c410;
			    padding: 3px 5px;
			    word-break: break-word;
			    margin: 3px;
			    border-radius: 5px;
			    color: white;
			    font-size: 12px;
	/* 		    cursor: pointer; */
		}
	.spanStyle2 {
			    background: #c0c4cc;
			    padding: 3px 5px;
			    word-break: break-word;
			    margin: 3px;
			    border-radius: 5px;
			    color: white;
			    font-size: 12px;
	/* 		    cursor: pointer; */
		}
		.gProgress {
		     color: black;
		     width: 240px;
		     height: 40px;
		     padding: 3px 5px;
		     border-radius: 6px;
		     background: linear-gradient( 90deg, #c30e0e, rgb(194, 199, 199) 70%, transparent 0);
		     border: 1px solid #c0c4cc;
		 }
uni-table {
  margin-bottom: 20px;
}
uni-pagination {
  display: flex;
  justify-content: center;
}
</style>